{extend name="public/base"/}
{block name="style"}
<style>
    .layui-table th{text-align:center;}
    .layui-table td{text-align:center;}
</style>
{/block}
{block name="content"}
<form class="layui-form" lay-filter="borrow-form" id="borrow-form">
    {:token()}
    <div class="layui-form-item">
        <div class="layui-col-xs3">
            <label class="layui-form-label">借用单号</label>
            <div class="layui-input-block">
                <input type="text" readonly placeholder="保存后自动生成" name="borrow_sn" class="layui-input">
            </div>
        </div>
        <div class="layui-col-xs3">
            <label class="layui-form-label xrequired">借用日期</label>
            <div class="layui-input-block">
                <input type="text" autocomplete="off" lay-reqText="借用日期必填" lay-verify="required" name="borrow_date" class="laydate-date-future layui-input">
            </div>
        </div>
        <div class="layui-col-xs3">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <input type="text" name="remark" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-col-xs6">
            <div class="layui-input-block" style="margin-left: 0px;">
                <div id="product-sku" msg="批量输入SKU"></div>
            </div>
        </div>
        <table class="layui-table" style="margin-top: 0px;">
            <thead>
                <tr>
                    <th width="100">图片</th>
                    <th width="230">SKU</th>
                    <th width="100">数量</th>
                    <th width="100">单价</th>
                    <th>备注</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <div class="layui-form-item">
        <div class="layui-col-xs12 text-center">
            <button type="submit" class="layui-btn layui-btn-normal" lay-submit lay-filter="borrow-form">保存</button>
        </div>
    </div>
</form>
<script type="text/html" id="data-sku-template">
    <tr class="data-sku-row">
        <td><img class="sku-img" src="__PUBLIC__/img/no-photo.png"/></td>
        <td>
            <div class="more-select-sku"></div>
        </td>
        <td><input class="layui-input qty" value="1" type="number" name="qty[]" lay-reqText="数量必填" lay-verify="required"/></td>
        <td class="price"></td>
        <td><input class="layui-input" type="text" name="t_remark[]"/></td>
        <td>
            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm data-sku-add">
                <i class="layui-icon layui-icon-add-1"></i>
            </button>
            <button type="button" class="layui-btn layui-btn-danger layui-btn-sm data-sku-remove">
                <i class="layui-icon layui-icon-delete"></i>
            </button>
        </td>
    </tr>
</script>
{/block}
{block name="script"}
<script type="text/javascript" src="__PUBLIC__/js/jquery.serializejson.min.js"></script>
<script type="text/javascript">
    //一般直接写在一个js文件中
    layui.extend({
        xmSelect: 'xm-select'
    }).use(['layer', 'form', 'jquery', 'longli', 'xmSelect'], function()
    {
        var layer = layui.layer
            , form = layui.form
            , $ = layui.jquery;

        // 自动添加借用单详情
        if($(".layui-table .data-sku-row").length < 1)
        {
            var html = $("#data-sku-template").html();
            $(".layui-table tbody").prepend(html);
            form.render("select");
            renderSearch($(".layui-table .more-select-sku:last").get(0));
        }

        // 提交表单
        form.on("submit(borrow-form)", function (data)
        {
            // 手动验证价格和数量
            var flag = false;
            $("form input.qty").each(function()
            {
                if($(this).val() * 1 <= 0)
                {
                    $(this).focus();
                    flag = true;
                    return false;
                }
            });
            if(flag)
            {
                layer.msg('借用详情有误，请检查', {time : 2000});
                return false;
            }
            var json = $("#borrow-form").serializeJSON();
            layui.longli.postJson('{:url("/wms/wborrow/save")}', json, function(response)
            {
                var icon = response.code == 1 ? 6 : 5;
                layer.msg(response.msg, {icon: icon, time: 1500}, function()
                {
                    if(response.code == 1)
                    {
                        location.href = "{:url('wms/wborrow/index')}";
                    }
                });
            });
            return false;
        });

        // 添加行
        $(".layui-table").on("click", ".data-sku-add", function()
        {
            var html = $("#data-sku-template").html();
            $(".layui-table .data-sku-row:last").after(html);
            form.render("select");
            renderSearch($(".layui-table .more-select-sku:last").get(0));
        });
        // 删除行
        $(".layui-table").on("click", ".data-sku-remove",function()
        {
            if($(".layui-table .data-sku-row").length == 1)
            {
                layer.msg('只有一条不允许删除。', {time : 2000});
                return;
            }
            $(this).parent().parent().remove();
        });

        /**
         * 渲染多选下拉框
         * @param node 需要渲染的节点
         * @param defVal 默认值
         */
        function renderSearch(node, defVal)
        {
            var xargs = {
                el: node,
                radio: true,
                clickClose: true,
                prop: {
                    name: 'sku',
                    value: 'sku',
                },
                name: 'sku[]',
                filterable: true,
                remoteSearch: true,
                on: function(data)
                {
                    if(data.change.length < 1) return;
                    var current = data.change[0];
                    $tr = $(node).parent().parent();
                    $tr.find(".sku-img").attr("src", current.image_url);
                    if(current.price) $tr.find(".price").text(current.price);
                },
                remoteMethod: function (text, callback, show)
                {
                    text = text.trim();
                    if (!text) return callback([]);
                    var outId = "{$curr_warehouse.warehouse_id}";
                    if(!outId)
                    {
                        layer.msg("请先选择借用仓库", {icon: 5, time: 1500});
                        return callback([]);
                    }
                    $.get("{:url('wms/product/get')}", {sku: text, more: 1, warehouse_id: outId}).done(function (response)
                    {
                        if(response.code != 1) return callback([]);
                        callback(response.data);
                    });
                }
            };
            if(defVal) xargs.data =  [{sku: defVal, selected: true}];
            layui.xmSelect.render(xargs);
        }
    });
</script>
{/block}